<template>
  <div id="temperHumChart">
    <div class="charts" ref="charts"></div>
    <div class="table">
      <el-table :data="tableList" border :span-method="arraySpanMethod">
        <el-table-column prop="merge_col" label="合并列" width="150px">
          <template #header>
            <div style="width: 100%;height: 80px;position: relative">
              <span style="position: absolute;top: 10px;right: 0;">项目</span>
              <span style="position: absolute;bottom: 10px;left: 0">时间</span>
              <div
                  style="position: absolute;top: 50%;width: 100%;height: 1px;border: 1px solid #9c9ca1;transform: rotateZ(37deg) scaleX(2.5); overflow: hidden"></div>
            </div>
          </template>
          <template #default="scope">
            <div style="display: flex" :class="'row-'+scope.$index">
              <span>{{ scope.row.merge_col }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop"
                         :label="item.label" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import * as echarts from "echarts";
import {option, columns, temp1, temp2, agv1, agv2} from "../components/temperHumChart/mock";

const charts = ref(null);
const tableList = ref(null);
// let myChart = reactive(null);

const buildData = () => {
  let len = temp1.length;
  let arr = [];
  // 温度
  let t1 = {
    merge_col: '温度(C°)',
    root_name: 'L01-一次化成间北侧'
  }
  // 露点
  let t2 = {
    merge_col: '露点(C°)',
    root_name: 'L01-一次化成间北侧'
  }
  // 平均温度
  let t3 = {
    merge_col: '平均温度(C°)',
    root_name: 'L01-一次化成间北侧'
  }
  // 平均露点
  let t4 = {
    merge_col: '平均露点(C°)',
    root_name: 'L01-一次化成间北侧'
  }

  for (let i = 0; i < len + 1; i++) {
    let k = 'data' + i
    t1[k] = temp1[i] || ''
    t2[k] = temp2[i] || ''
    t3[k] = agv1[i] || ''
    t4[k] = agv2[i] || ''
  }
  arr.push(t1, t2, t3, t4)
  return arr
}

const arraySpanMethod = ({row, column, rowIndex, columnIndex}) => {
  console.log(column.property)
  if (column.property === 'root_name') {
    if (rowIndex === 0) {
      return [4, 1]
    } else {
      return [0, 0]
    }
  }

  if (rowIndex === 2 || rowIndex === 3) {
    if (columnIndex > 2) {
      return [0, 0]
    } else if (columnIndex === 2) {
      return [1, 24]
    }
  }

  return [1, 1]
}

onMounted(() => {
  let myChart = echarts.init(charts.value);
  option && myChart.setOption(option);
  tableList.value = buildData()
})
</script>


<style>
#temperHumChart {
  width: 100%;
  height: 100%;

  .charts {
    width: 100%;
    height: 49%;
    padding-top: 20px;
  }

  .table {
    width: 100%;
    margin-top: 50px;
    padding: 0 10px;

  }

  .row-0 {
    &:before {
      margin: 0 5px;
      background: #EE822F;
      content: ' ';
      width: 15px;
      height: 3px;
      border-radius: 3px;
      transform: translateY(9px);
    }
  }

  .row-1 {
    &:before {
      margin: 0 5px;
      background: #F2BA02;
      content: ' ';
      width: 15px;
      height: 3px;
      border-radius: 3px;
      transform: translateY(9px);
    }
  }

  .row-2 {
    &:before {
      margin: 0 5px;
      background: #75BD42;
      content: ' ';
      width: 15px;
      height: 3px;
      border-radius: 3px;
      transform: translateY(9px);
    }
  }

  .row-3 {
    &:before {
      margin: 0 5px;
      background: #31C0B4;
      content: ' ';
      width: 15px;
      height: 3px;
      border-radius: 3px;
      transform: translateY(9px);
    }
  }

}

</style>